import { createApp } from 'vue'
import './style.css'
import './assets/main.scss'
import App from './App.vue'
import ElementPlus from 'element-plus'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import './api/mock'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { createPinia } from 'pinia'
import { createPersistedState } from "pinia-persistedstate-plugin"

// 引入 @google/model-viewer 的类型声明

// 声明 ModelViewer 组件类型
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'model-viewer': {
                src: string
                alt?: string
                ar?: boolean
                'ar-modes'?: string
                'camera-controls'?: boolean
                'auto-rotate'?: boolean
                style?: string
            }
        }
    }
}

const app = createApp(App)

// 全局注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

// 全局注册 model-viewer 组件
app.component('ModelViewer', {
    template: '<model-viewer v-bind="$attrs" v-on="$listeners"></model-viewer>'
})

const pinia = createPinia()
const persistedState = createPersistedState()
pinia.use(persistedState)

app.use(pinia)
app.use(router) // 使用路由
app.use(ElementPlus, { locale: zhCn }) // 全局使用组件，中文

app.mount('#app')